<template>
  <div class="container">
    <!-- 卡片视图组件 -->
    <el-card class="box-card">
      <!-- 栅格组件 -->
      <el-row>
        <el-col :span="16">
          <div class="grid-content bg-purple">
            <!-- :model="SubForm" :rules="SubRules" -->
            <el-form ref="SubRef" label-width="70px">
              <el-form-item class="formlist" label="学科名称" prop="name">
                <el-input v-model="userInfo.subjectName"></el-input>
              </el-form-item>
            </el-form>
            <el-button @click="removeSubjeckt">清除</el-button>
            <el-button type="primary" @click="SubFormList">搜索</el-button>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple-light">
            <el-button type="success" icon="el-icon-edit" @click="AddSubDialog"
              >新增学科</el-button
            >
          </div>
        </el-col>
      </el-row>
      <!-- arlit组件 这里需要自定义条数-->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        show-icon
        class="alertlist"
      ></el-alert>

      <!-- table表格区域 -->
      <el-table id="id" :data="SubData" style="width: 100%">
        <el-table-column
          align="center"
          type="index"
          label="序号"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="subjectName"
          label="学科名称"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="username"
          label="创建者"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="addDate"
          label="创建时间"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="isFrontDisplay"
          label="前台是否显示"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.isFrontDisplay === 1">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="twoLevelDirectory"
          label="二级目录"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="tags"
          label="标签"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="totals"
          label="题目数量"
        ></el-table-column>
        <el-table-column align="center" label="操作" width="300">
          <template slot-scope="scope">
            <span
              class="noneBorder"
              autofocus="false"
              @click="SubjectJoin(scope.row)"
              >学科分类</span
            >
            <span
              class="noneBorder"
              autofocus="false"
              @click="SubjectCate(scope.row)"
              >学科标签</span
            >
            <span
              class="noneBorder"
              autofocus="false"
              @click="modification(scope.row)"
              >修改</span
            >
            <span
              class="noneBorder"
              autofocus="false"
              @click="DeleteSubject(scope.row)"
              >删除</span
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="userInfo.page"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="userInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>

    <!-- 新增学科的弹出款 -->
    <el-dialog
      title="新增学科"
      :visible.sync="SubDialog"
      width="400px"
      @close="SubForm.subjectName = ''"
    >
      <!-- 弹出层的主体内容 -->
      <el-form
        :model="SubForm"
        :rules="SubRules"
        ref="SubRef"
        label-width="80px"
      >
        <el-form-item label="学科名称" prop="subjectName">
          <el-input
            v-model="SubForm.subjectName"
            id="addSub"
            placeholder="请输入学科名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            v-model="SubForm.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="SubDialog = false">取 消</el-button>
        <el-button type="primary" @click="SubVisble">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改学科的弹出款 -->
    <el-dialog title="新增学科" :visible.sync="EditDialog" width="400px">
      <!-- 弹出层的主体内容 -->
      <el-form
        :model="EditForm"
        :rules="EditRules"
        ref="EditRef"
        label-width="80px"
      >
        <el-form-item label="学科名称" prop="subjectName">
          <el-input
            v-model="EditForm.subjectName"
            id="addSub"
            placeholder="请修改学科名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            v-model="EditForm.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="EditDialog = false">取 消</el-button>
        <el-button type="primary" @click="editSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, update, remove } from '@/api/hmmm/subjects.js'
import dayjs from 'dayjs'
export default {
  data() {
    return {
      isFront: 1,
      SubForm: {
        subjectName: '',
        isFrontDisplay: 1 // 是否显示前台
      }, // 新增学科表单

      SubRules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]
      }, // 学科表单校验规则
      userInfo: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      SubData: [], // table表格数据
      total: 0,
      SubDialog: false, // 新增学科的弹出框
      EditDialog: false, // 修改学科的弹出框的morning显示与隐藏
      EditForm: {
        subjectName: '',
        isFrontDisplay: 1,
        id: 0
      },
      EditRules: {
        subjectName: [
          { required: true, message: '修改学科名称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    SubjectCate(row) {
      // /subjects/tags?id=13&name=c
      this.$router.push(
        `/subjects/tags?id=${row.id}&name=${encodeURIComponent(
          row.subjectName
        )}`
      )
    },

    SubjectJoin(row) {
      this.$router.push(
        `/subjects/directorys?id=${row.id}&name=${encodeURIComponent(
          row.subjectName
        )}`
      )
    },

    // 删除学科的事件
    async DeleteSubject(row) {
      // console.log(row)
      const comfirmResult = await this.$confirm(
        '此操作将永久删除该学科, 是否继续?',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)

      console.log(comfirmResult)

      try {
        if (comfirmResult !== 'confirm')
          return this.$message.info('你取消了删除')

        const { data } = await remove(row)
        console.log(data)

        this.$message.success('删除成功')
        this.SubFormList()
      } catch (error) {
        this.$message.error('删除失败')
      }
    },

    // 点击修改的确认事件
    editSure() {
      try {
        this.$refs.EditRef.validate(async valid => {
          // 判断正确与否
          if (!valid) return
          // 正确 发送ajax请求
          await update(this.EditForm)

          // // 成功之后的返回
          // console.log(data)
          this.$message.success('修改学科成功')
          // 关闭对话框
          this.EditDialog = false
          // 刷新用户列表数据
          this.SubFormList()
        })
      } catch (error) {
        this.$message.error('修改学科失败')
      }
    },

    // 点击修改的事件
    async modification(row) {
      console.log(row)
      this.EditForm.subjectName = row.subjectName
      this.EditForm.id = row.id
      if (row.isFrontDisplay === 0) {
        this.EditForm.isFrontDisplay = false
      } else {
        this.EditForm.isFrontDisplay = true
      }
      // 点击显示
      this.EditDialog = true
    },

    // 添加学科的确认按钮
    SubVisble() {
      try {
        this.$refs.SubRef.validate(async valid => {
          // 判断正确与否
          if (!valid) return
          // 正确 发送ajax请求
          await add(this.SubForm)

          // // 成功之后的返回
          // console.log(data)
          this.$message.success('添加学科成功')
          // 关闭对话框
          this.SubDialog = false
          // 刷新用户列表数据
          this.SubFormList()
          // 成功清空列表的数据
          this.SubForm.subjectName = ''
        })
      } catch (error) {
        this.$message.error('添加学科失败')
      }
    },

    AddSubDialog() {
      // 打开弹出层
      this.SubDialog = true
      if (this.isFront === 1) {
        this.SubForm.isFrontDisplay = true
      } else {
        this.SubForm.isFrontDisplay = false
      }
    },

    // 清除的事件
    removeSubjeckt() {
      this.userInfo.subjectName = ''
      this.SubFormList()
    },

    handleCurrentChange(newPage) {
      console.log(newPage)
      this.userInfo.page = newPage
      this.SubFormList()
    },

    handleSizeChange(newSize) {
      console.log(newSize)
      this.userInfo.pagesize = newSize
      this.SubFormList()
    },

    SubFormList() {
      list(this.userInfo)
        .then(data => {
          // 更改时间格式
          // console.log(data)
          data.data.items.forEach(item => {
            item.addDate = dayjs(item.addDate).format('YYYY-MM-DD hh:mm')
          })
          this.SubData = data.data.items
          this.total = data.data.counts
          // this.isFrontDisplay = data.data.items.isFrontDisplay
          // console.log(data.data.items)
          // console.log(this.SubData)
          this.$message.success('刷新成功')
        })
        .catch(error => {
          this.$message.error('刷新失败')
        })
    }
  },
  created() {
    this.SubFormList()
  }
}
</script>

<style scoped lang="scss">
.container {
  .el-card {
    margin: 1px 0;
  }
  .el-form {
    display: inline-block;
  }
  .bg-purple-light {
    text-align: right;
  }
  .formlist {
    width: 350px;
    margin-right: 10px;
  }
  .el-alert,
  .el-table {
    margin-bottom: 20px;
  }
  .noneBorder {
    padding: 10px 0;
    margin-right: 10px;
    color: #409eff;
    cursor: default;
  }
  .el-pagination {
    text-align: right;
  }
   input#addSub {
    width: 280px;
  }
}
</style>
